<script lang="ts" setup>
import { allprosFn } from "@/api/getPro";
import { Ref, ref, onMounted } from "vue";
import * as echarts from 'echarts';
// import { nextTick } from "process";
import HeaderCom from "@/components/header/HeaderCom.vue";
const likeList: Ref<any> = ref([]);
// const proList:Ref<any> = ref([]);
let proList = [];  //不需要响应式
let salenumList = [];
const myChart: Ref<any> = ref(null);
const active: Ref<string> = ref('0');

onMounted(() => {

  allprosFn().then(res => {
    console.log(res);
    proList = res.map(item => item.proname);
    salenumList = res.map(item => item.salenum);
    console.log(proList, salenumList);

    likeList.value = res.filter(item => item.isLike == 1)
    console.log(likeList.value);

    // 解决方案
    // 要确保你能正确打印出 proList 和 salenumList 的数据，你应该将 console.log 语句放置在 then 的内部，这样可以确保在数据赋值后再进行检查，所以可以这样修改你的代码：

    myChart.value = echarts.init(document.getElementById('main'));
    // changeEcharts('line', ['奶昔', '小龙虾', '雪纺衫', '裤子', '高跟鞋', '袜子'], [500, 200, 36, 10, 10, 20]);
    changeEcharts('line', proList, salenumList);

  })

  //强制更新真实dom
  // nextTick(() => {
  // 基于准备好的dom，初始化echarts实例 只打开的时候只执行一次
  // window.onload = ()=>{    
  //             作用域：虽然你在 then 方法内给 proList 和 salenumList 赋值，但在 then 外部调用 console.log 时这些变量还没有被更新。其实你的是在 then 的外部调用打印。

  // 解决方案
  // 要确保你能正确打印出 proList 和 salenumList 的数据，你应该将 console.log 语句放置在 then 的内部，这样可以确保在数据赋值后再进行检查，所以可以这样修改你的代码：
  console.log(proList, salenumList);  //空数据？为什么？
  console.log(likeList.value);
  //      myChart.value = echarts.init(document.getElementById('main'));
  // // changeEcharts('line', ['奶昔', '小龙虾', '雪纺衫', '裤子', '高跟鞋', '袜子'], [500, 200, 36, 10, 10, 20]);
  // changeEcharts('line',['香辣炸鸡', '抹茶冰淇淋', '蔬菜沙拉', '汉堡王', '草莓奶昔', '香辣炸鸡', '抹茶冰淇淋', '蔬菜沙拉', '汉堡王', '草莓奶昔'] ,[200, 150, 180, 300, 130, 200, 150, 180, 300, 130]);
  // }     
})

function changeEcharts(value = 'line', x, y) {
  myChart.value.setOption({   //配置项
    color: ['red'],  //图形颜色全局的  如果自己设置用自己的 否则用全局的

    title: {
      text: '产品销售量'
    },
    tooltip: {
      trigger: 'axis', // 触发类型，这里使用 'item' 以便对每个数据项触发
      // formatter: function(proList) {
      //     // params[0] 获取相关数据
      //     return `${proList}<br/>销售量: ${salenumList}`;
      // },
      show: true,  //默认是true
    },
    grid: {   //网格线
      backgroundColor: 'red'
    },
    legend: {   //图例
      //data: ['销量']
      data: [{     //图例名称
        name: '销售量',
        textStyle: {
          color: 'red',
          icon: 'circle',
          // backgroudColor:'yellow'
        }
      }],
      //    itemStyle.decal.backgroundColor:'red',

      // orient:'horizontal', //图例位置 
      align: 'left', //图例位置 要加引号 不加引号会识别成变量 默认left
      padding: 10,  //图例间距
      itemstyle: {    //图例样式
        color: 'yellow',
        decal: {
          backgroundColor: "red"
        },   //图例背景色
      },

    },

    xAxis: {
      type: 'category',
      data: x || [{
        value: '衬衫',
        textStyle: {
          color: 'green',
        }
      },
        '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'
      ]
    },
    yAxis: {},
    series: [
      {
        name: '销售量',
        type: value,  //警告 不知道默认是什么图形
        //   如果y没有传值 默认是[5, 20, 36, 10, 10, 20]  如果有值就用y值
        data: y || [5, 20, 36, 10, 10, 20]
      }
    ]
  })

}
</script>

<template>
  <div class="box">
    <!-- 这种表头最好封装成局部组件 多个地方用到了 -->
    <!-- <header>
            <van-icon @click="$router.back()" name="arrow-left" />
            <h3>我的收藏</h3>
        </header> -->


    <!--自定义的组件  里面有具名插槽  :ishow="false" -->
    <HeaderCom title="我的收藏" :isshow="true">
      <!-- <template #middle>
           <span>哈哈哈</span>
          </template> -->
      <!-- <template #middle>  
              <span>hhhh</span>   -->
      <!-- 如果展示插槽内容则写上插槽名  具名插槽   如果不展示不写即可  这个组件可以通用-->
      <!-- </template> -->

     <!-- <template #right>
        <p class="iconfont icon-sangediandian"></p>  
      </template>
      -->
        <!-- 如果展示插槽内容则写上插槽名  具名插槽 -->
      
    </HeaderCom>


    <!-- 导航栏组件 -->
    <!-- <van-nav-bar
  title="我的收藏"
  @click-left="$router.back()" -->
    <!-- > -->
    <!-- 或者自定义组件 用插槽 有的内容可写可不写 -->

    <!-- <template #left>
    <div class="iconfont icon-fanhuijiantou">   
    </div>
</template>
    </van-nav-bar> -->

    <van-tabs color="#f66" title-active-color="#f66" v-model:active="active">
      <van-tab title="商品收藏">
        <van-card v-for="item in likeList" :key="item.proid"
          @click="$router.push({ name: 'detail', query: { proid: item.proid, id: item.id } })" :num="item.salenum + '月销量'"
          :price="item.price" :desc="item.descpro" :title="item.proname" :thumb="item.img">
        </van-card>
      </van-tab>

      <van-tab title="店铺收藏">

      </van-tab>

    </van-tabs>


    <div class="cont">已经到底了~</div>

    <div id="main"></div>

  </div>


</template>

<style lang="scss" scoped>
header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: white;
}

.van-icon {
  position: relative;
  right: 140px;
  font-size: 16px;
}

.box {
  background-color: #f7f7f7;
  width: 100%;
  height: 1200px;
}

.likelist,
.van-card {
  height: 100%;
  width: 94%;
  margin: 5px auto;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
}

.cont {
  width: 100%;
  height: 30px;
  margin-top: 30px auto;
  text-align: center;
  line-height: 30px;
  color: gray;
  // background-color: red;
}

#main {
  //原因 这个是id用# 不是class.
  width: 100%;
  height: 300px;
  background-color: rgb(255, 255, 255);
  margin-top: 50px;
  padding: 10px;
  box-sizing: border-box;
}

.icon-sangediandian{
  position: relative;
  left: 110px;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
}
</style>